<template>
  <div class="main">
    <div class="top"><img src="@/assets/images/teaching/newimg.png"></div>
    <div class="Newlist">
      <div class="item"  v-for="item in hotList" :key="item.id" @click="toDetail(item)">
        <div class="img">
<!--          <img src="@/assets/images/teaching/99.jpg">-->

          <img :src="item.fileAddress">
        </div>
        <div class="content">
          <div class="title">
            {{item.title }}
          </div>
          <div class="text"  >
            {{item.subtitle }}
          </div>
          <div class="time">{{ parseTime(item.releaseTime) }}</div>
        </div>
      </div>
      <!-- 新闻列表 -->
      <div class="Pagination">
        <el-pagination
            @size-change="changeSize"   @current-change="changePage"  :current-page="currentPage"  :page-size="pageSize"
            background
            layout="prev, pager, next"
            :total="total">
        </el-pagination>
      </div>
    </div>
    <!-- 新闻列表 -->
    <div class="right">
      <div class="news-img"><img src="@/assets/images/teaching/mkds.png"></div>
      <div class="news-img"><img src="@/assets/images/teaching/ewm.png"></div>
    </div>
    <!-- 右侧内容 -->
  </div>
</template>

<script setup lang="ts">
import { useCounterStore } from "@/store/modules/counter.ts";
import { useRouter } from "vue-router";
import {getHostList} from "@/api/hot/hot";
import { parseTime} from '@/utils/util'
const counterStore = useCounterStore();
const route = useRouter();
function goPath(path) {
  route.push(path);
}

const heightImg = ref("0px");
const title =ref("");
const hotList = ref([]);
const currentPage = ref(1);
const pageSize = ref(15);
const total = ref(0);
// 修改后的加载数据方法
function loadData() {
  try {
      getHostList({
      title:title.value,
      pageNum: currentPage.value,
      pageSize: pageSize.value
    }).then(res => {
        hotList.value = res.list;
        total.value = res.total;
    })

  } catch (error) {
    console.error("加载数据失败", error);
  }
}
function changeSize(data){
  pageSize.value=data;
  loadData();
};
function changePage(data){
  currentPage.value = data;
  loadData();
}
function toDetail(item){
  route.push({
    name: 'NewsDetails',
    query: {
      id: item.newsId
    }
  })
}
onMounted(() => {
  loadData(); // 初始化加载数据
  updateHeight();
  window.addEventListener("resize", updateHeight);
});
onUnmounted(() => {
  window.removeEventListener("resize", updateHeight);
});

function updateHeight() {
  const browserWidth = window.innerWidth > 1200 ? window.innerWidth : 1200;
  // 浏览器图片高度 = 图片高度 / 图片宽度 * 浏览器图片宽度
  heightImg.value = `${(1182 / 3840) * browserWidth}px`;
}
</script>

<style lang="scss" scoped>
.main {
  width: 1154px;
  margin: 0 auto;
  padding: 105px 0 50px;
  color: #111f2c;
  display: flex;
  flex-wrap: wrap;
 .top{
  width: 100%;
   height: 46px;
   margin-bottom: 24px;
   img{
     height: 100%;
   }
 }
  .Newlist{
    display: inline-block;
    vertical-align: top;
    width: 792px;
    margin-right: 64px;
    .item{
      padding-bottom: 20px;
      margin-bottom: 24px;
      border-bottom: 1px solid rgba(17, 31, 44, .08);
      display: flex;
      cursor: pointer;
      &:hover{
        .content{
          .title{
            color: #f01414;
          }
        }
      }
      .img{
        width: 240px;
        height: 159px;
        display: inline-block;
        img{
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 4px;
        }
      }
      .content{
        width: 486px;
        height: 159px;
        display: inline-block;
        vertical-align: top;
        margin-left: 24px;
        position: relative;
        .title{
          line-height: 28px;
          font-size: 20px;
          color: #111f2c;
          letter-spacing: 0;
          font-weight: 500;
          margin-bottom: 12px;
          -webkit-transition: color .2s;
          -moz-transition: color .2s;
          transition: color .2s;
        }
        .text{
          font-size: 14px;
          color: rgba(17, 31, 44, .56);
          letter-spacing: 0;
          line-height: 22px;
          font-weight: 400;
          display: -webkit-box;
          overflow: hidden;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .time{
          height: 22px;
          font-size: 14px;
          color: rgba(17, 31, 44, .4);
          letter-spacing: 0;
          line-height: 22px;
          font-weight: 400;
          position: absolute;
          bottom: 0;
        }
      }
    }
    .Pagination{
      display: flex;
      justify-content: right;
      width: 100%;
    }
  }
  .right{
    display: inline-block;
    vertical-align: top;
    width: 298px;
    .news-img{
      margin-bottom: 16px;
      width: 100%;
      img{
        width: 100%;
      }
    }
  }
}
</style>
